<template>
<div class="user">
    <div class="avatar">

        <img v-if="!!user.avatar" :src="user.avatar" alt="">
        <img v-else :src="avatar" alt="">

    </div>

    <div class="info">
        <span class="username">{{user.username}}</span>
        <div class="hobbies">
            <span v-for="hobby in user.hobbies" :key="hobby">
                {{hobby}}
            </span>
        </div>
    </div>

    <div class="chat-btn">
        <md-button class="md-icon-button" @click="privateChat(user._id)">
            <md-icon class="md-primary">chat_bubble</md-icon>
        </md-button>
    </div>
    

</div>
</template>

<script>
export default {
    name: 'UserList',
    props: {
        user: {
            type: Object,
            default: () => ({
                id: '123',
                username: '吴泽群',
                avatar: '',
                hobbies:['篮球','编程']
            })
        }
    },
    data() {
        return {
            avatar: require('../assets/avatar.jpg'),

        }
    },
    created() {

    },
    methods: {
        privateChat(id) {
            this.$router.push('chat_window/' + id);
        }
    }
}
</script>

<style lang="scss" scoped>
.user {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    border-bottom: rgba(0,0,0,0.1) solid 1px;
    padding: 1vh 2vh;
    .info{
        margin-left: 2vh;
    }
    .avatar {
        img {
            border-radius: 50%;
            width: 8vh;
        }
    }
    .chat-btn{
        margin-left:auto;
        margin-right: 1vw;
    }
}
.username{
    font-size: 1.3rem;
    font-weight: 500;
    color:#030303 ;
}
</style>
